import React, { Dispatch, SetStateAction } from 'react'
import { FormInstance, Modal } from 'antd'
import HomeStore from '../../stores/HomeStory'
import { inject, observer } from 'mobx-react'

import SearchForm, { SearchColumnType } from '../form/SearchForm'

import '../../config/dark-theme.less'

interface GoodsTypeModalProps {
  HomeStore: HomeStore
  SetVisible: Dispatch<SetStateAction<boolean>>
  Visible: boolean
  Title?: React.ReactNode
  Columns?: SearchColumnType[]
  form: FormInstance<any>
}

const GoodsTypeModal: React.FC<GoodsTypeModalProps> = (
  props: GoodsTypeModalProps
) => {
  const {
    form,
    Columns = [],
    SetVisible,
    Visible = false,
    Title = '添加',
  } = props

  const handleOk = () => {
    SetVisible(false)
    form
      .validateFields()
      .then((values) => {
        form.resetFields()
        console.log('modal val', values)
      })
      .catch((info) => {
        console.log('Validate Failed:', info)
      })
  }

  const handleCancel = () => {
    SetVisible(false)
  }

  return (
    <>
      <Modal
        title={Title}
        visible={Visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <SearchForm
          {...props}
          ShowButton={false}
          Columns={Columns}
          Direction='vertical'
        />
      </Modal>
    </>
  )
}

export default inject('HomeStore')(observer(GoodsTypeModal))
